<template>
  <div class="mod-user">
    <el-card class="box-card">
        <div>
          <label style="font-weight: bold; font-size: 20px">1.下载模板</label>
          <label style="margin-left: 40px; color: #a8a8a8">下载需要导入试题所用的模板</label>
        </div>

        <div style="margin: 10px">
          <el-link :underline="false" type="primary" href="/static/template/questionImport.xlsx" target="_blank">下载Excel模版</el-link>
        </div>

        <div>
          <label style="font-weight: bold; font-size: 20px">2.试题导入</label>
        </div>

        <div style="margin: 20px">
          <el-form :model="importForm" ref="importForm" :rules="importRules" label-width="100px" class="demo-ruleForm">

            <el-form-item label="考试类型:" prop="subjectId">
              <el-select  clearable filterable v-model="importForm.subjectId" placeholder="请选择考试类型">
                <el-option
                  v-for="item in examTypeList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="文件:">
              <el-upload
                :with-credentials="true"
                class="upload-demo"
                :data="importForm"
                :headers="headers"
                accept=".xls,.xlsx"
                :show-file-list="false"
                :on-success="uploadExcelSuccess"
                :before-upload="beforeUploadExcel"
                :action="uploadExcelAction" >
                <el-button size="small" type="primary">导入试题</el-button>
                <div slot="tip" class="el-upload__tip">只能上传excel</div>
              </el-upload>
            </el-form-item>
          </el-form>
        </div>
    </el-card>
  </div>
</template>
<script>
  import {getDictValueByType, examTypeList} from '@/api/dict'
  export default {
    name: 'course',
    data () {
      return {
        examTypeList: examTypeList,
        headers: {
          Authorization: localStorage.getItem('Authorization'),
          Platform: 'educationAdmin'
        },
        gradeInfoList: [],
        subjectList: [],
        loading: null,
        importForm: {
          schoolType: null,
          gradeInfoId: null,
          subjectId: null
        },
        importRules: {
          schoolType: [{required: true, message: '请选择', trigger: 'blur'}],
          subjectId: [{required: true, message: '请选择', trigger: 'blur'}]
        },
        schoolTypeList: [],
        uploadExcelAction: this.$http.httpUrl('/system/question/importQuestion')
      }
    },

    mounted () {
      getDictValueByType('industry_type').then(response => {
        this.schoolTypeList = response.data.data
      })
    },

    methods: {

      beforeUploadExcel () {
        if (!this.importForm.subjectId) {
          this.$message.error('请选择考试类型')
          return false
        }

        this.loading = this.$loading({
          lock: true,
          text: '数据导入中, 请等待',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })

        return true
      },

      uploadExcelSuccess (res) {
        this.loading.close()
        if (res.code === 3) {
          this.$message.error(res.message)
          window.open(res.data, '_blank')
        } else if (res.code === 1) {
          this.$message.success(res.message)
        } else {
          this.$message.error(res.message)
        }
      }
    },

    filters: {
    }
  }
</script>
<style>

</style>
